import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';

class Banner5 extends React.PureComponent {
  render() {
    return (
      <div className="home-page-wrapper banner5">
        <div className="home-page banner5-page">
          <QueueAnim
            key="text"
            type="bottom"
            leaveReverse
            ease={['easeOutQuad', 'easeInQuad']}
            className="banner5-title-wrapper"
            componentProps={{
              md: undefined,
              xs: undefined,
              className: 'banner5-title-wrapper',
            }}
          >
            <div key="title" className="banner5-title">产品名</div>
            <div key="explain" className="banner5-explain">产品标语介绍</div>
            <div key="content" className="banner5-content">产品的详细说明，如是什么东西之类的文字</div>
            <div key="button" className="banner5-button-wrapper">
              <a href="#" className="ant-btn ant-btn-primary banner5-button">
                <span>开始使用</span>
              </a>
            </div>
          </QueueAnim>
          <TweenOne 
            animation={{ 
              y: '+=30',
              opacity: 0,
              type: 'from',
              ease: 'easeOutQuad',
            }} 
            key="title" 
            className="banner5-image"
          >
            <img src="/images/A_-wAhRYnWQscAAAAAAAAAAABkARQnAQ.png" width="100%" alt="img" />
          </TweenOne>
        </div>
      </div>
    );
  }
}
export default Banner5;
